 |
 |
题 目:用Flash制作简易的图片浏览器
1．新建一个Flash文档，单击“属性”面板中的“尺寸”按钮，打开“文档属性”面板配置场景大小为650px x 450px，背景为白色，帧频为30fps
2．按快捷键Ctrl R打开“导入”面板导入三张图片。如图1所示，图片image的宽、高为640px、480px。把图片image的宽、高放大为2400px、1600px，并命名为image2。图片imageblu.jpg是由图片image.jpg经过模糊处理得到的。
图1
3．按快捷键Ctrl F8，创建一个名为“blur”影片剪辑元件，按快捷键Ctrl L打开“库”面板，将图片imageblur拖入到blur元件的场景中。点选场景中的blur元件，按快捷键Ctrl K打开“对齐”面板，点选“相对和舞台”按钮，再点击“水平对齐”和“垂直对齐”两个按钮，如图2所示，使“影片”元件在居中于场景内。
图2
4．按快捷键Ctrl F8，创建一个image_view影片剪辑元件。点选“矩形”工具 ，绘制一个宽、高都为136px的黑色矩形框，矩形框的中央和场景中央重叠，如图3所示。
图3
5．按快捷键Ctrl F8，创建一个名为image_view2影片剪辑元件。同样点选“矩形”工具，绘制一个宽、高都为61px的矩形框。
6．按快捷键Ctrl F8，创建一个view影片剪辑元件。打开“库”面板，将图片image拖拽到view元件的场景中。点选image图片，在“属性”面板中将其宽、高设为400px、300px，图片的几何中央和场景的中央重叠。
7．创建一个名为view2的影片剪辑元件，其层的结构如图4所示。在“blur实例”层里是“blur”元件。“image2”层场景中是image2图片。
图4
8．回到“场景 1”。创建五个图层，如图5所示。从“库”面板中把任何的元件拖拽到相对应的层中。“遮罩”层中是个和view2元件相同大小的矩形块。注意：图5中白色区域为整个场景。
图5
分别点选各层中的影片剪辑元件，在“属性”面板中为元件起实例名。元件image_view的实例名是viewFinder，如图6所示。元件view1的实例名是image，宽、高为200px、150px；元件imageview的实例名是window；元件view2的实例名是image2，宽、高为2400px、1800px。
图6
9．元件和场景配置的工作做好了，现在点选实例image_view2，按F9打开“动作”面板，输入如下代码。
onClipEvent (load) {
// 初始化变量
danX = _root.image._x-(_root.image._width/2);
danY = _root.image._y-(_root.image._height/2);
ratio = (_root.image2._width/_root.image._width)*(-1);
// 定义图片移动速度
speedRatio = 15;
// 创建函数
function myClick (myX, myY) {
xDis = ((myX-this._x)/speedRatio);
yDis = ((myY-this._y)/speedRatio);
// 制造图片的透明效果
_root.image2.blur._alpha = ((Math.abs(xDis) Math.abs(yDis))*5);
// 制造图片的移动效果
_root.viewFinder._x = _root.viewFinder._x xDis;
_root.viewFinder._y = _root.viewFinder._y yDis;
_root.image2._x = ((_root.viewFinder._x-_root.image._x)*ratio) (_root.window._x);
_root.image2._y = ((_root.viewFinder._y-_root.image._y)*ratio) (_root.window._y);
}
}
onClipEvent (mouseUp) {
if (_root.image.hitTest(_root._xmouse, _root._ymouse, true)) {
danX = _root._xmouse;
danY = _root._ymouse;
}
}
onClipEvent (enterFrame) {
// 调用函数
myClick(danX, danY);
}
好了，整个效果到这里就做好了。大家能够按快捷键Ctrl Enter测试一下。